<template>
  <!-- 发个圈-->
  <view class="moments-wrap">
    <view
      class="moments-top-bg"
      style="background: url('/static/image/img16.png') no-repeat"
    >
      <view class="search-box">
        <u-search shape="round" :showAction="false"></u-search>
      </view>
    </view>
    <view
      class="tab-list"
      style="background: url('/static/image/img29.png') no-repeat"
    >
      <view class="tab-item" @click="handelClickBtn(0)">
        <view class="icon" :class="[activeIndex == 0 ? 'acitve' : '']">
          推荐
        </view>
        <image
          src="/static/image/red_line.png"
          class="red-line"
          v-if="activeIndex == 0"
        ></image>
      </view>
      <view class="tab-item" @click="handelClickBtn(1)">
        <view class="item-content"
          ><text :class="[activeIndex == 1 ? 'acitve' : '']">全部类目</text>
          <u-icon name="arrow-down-fill" v-if="activeIndex == 0"></u-icon>
          <u-icon
            name="arrow-up-fill"
            color="#D40000"
            v-if="activeIndex == 1"
          ></u-icon>
        </view>
        <view class="icon"></view>
      </view>
      <view class="show-list" v-if="activeIndex == 1">
        <view class="show-item">每日达人福利</view>
        <view class="show-item">每日达人福利</view>
        <view class="show-item">每日达人福利</view>
        <view class="show-bottom-btn">
          <view class="btn reset-btn">重置</view>
          <view class="btn sure-btn">确认</view>
        </view>
      </view>
    </view>
    <view class="moments-list">
      <view class="moments-item">
        <view class="top-panel">
          <view class="logo-box">
            <image
              src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
            ></image>
          </view>
          <view class="company-box">
            <view class="company-title">国控轻工优选</view>
            <view class="time">2025-10-25 10:00:00</view>
          </view>
        </view>
        <view class="txt-panel">
          传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺
        </view>
        <view class="img-list">
          <view class="img-item">
            <image
              src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzM0NzYzNjA3LjYxMTMwMTI%3D%27/0.png"
            ></image>
          </view>
          <view class="img-item">
            <image
              src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzM0NzYzNjA3LjYxMTMwMTI%3D%27/0.png"
            ></image>
          </view>
          <view class="img-item">
            <image
              src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzM0NzYzNjA3LjYxMTMwMTI%3D%27/0.png"
            ></image>
          </view>
        </view>
        <view class="shop-panel">
          <view class="shop-left">
            <view class="img-box">
              <image
                src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzM0NzYzNjA3LjYxMTMwMTI%3D%27/0.png"
              ></image>
            </view>
          </view>
          <view class="shop-right">
            <view class="shop-title">蛋黄酥蛋黄酥蛋黄酥蛋黄酥蛋黄酥蛋黄酥</view>
            <view class="coupon-bg">
              <view class="coupon-item first-item">
                <view class="coupon-1">¥58.00</view>
                <view class="coupon-txt">券后价</view>
              </view>
              <view class="coupon-item second-item">
                <view class="coupon-1">¥58.00</view>
                <view class="coupon-txt">券额</view>
              </view>
              <view class="coupon-item three-item">
                <view class="txt1">去购买</view>
                <view class="txt1">省赚¥58.00</view>
                <view class="triangle-right"></view>
              </view>
            </view>
          </view>
        </view>
        <view class="comment-panel">
          <view class="comment-content">
            <view class="comment-top">
              <view class="comment-title"
                ><u-icon name="chat" size="30"></u-icon
                ><view>评论文案:</view></view
              >
              <view class="copy-btn">复制评论</view>
            </view>
            <view class="comment-txt"
              >最新活动最新活动最新活动最新活动最新活动最新活动</view
            >
          </view>
          <view class="bottom-list">
            <view class="bottom-item bottom-line">
              <view class="inner">
                <u-icon name="photo" size="24"></u-icon>
                复制文案
              </view>
            </view>
            <view class="bottom-item bottom-line">
              <view class="inner">
                <u-icon name="photo" size="24"></u-icon>
                分享好物
              </view>
            </view>
            <view class="bottom-item">
              <u-icon name="photo" size="24"></u-icon>
              下载素材
            </view>
          </view>
        </view>
      </view>
      <view class="moments-item">
        <view class="top-panel">
          <view class="logo-box">
            <image
              src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
            ></image>
          </view>
          <view class="company-box">
            <view class="company-title">国控轻工优选</view>
            <view class="time">2025-10-25 10:00:00</view>
          </view>
        </view>
        <view class="txt-panel">
          传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺传统工艺
        </view>
        <view class="img-list">
          <view class="img-item">
            <image
              src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzM0NzYzNjA3LjYxMTMwMTI%3D%27/0.png"
            ></image>
          </view>
          <view class="img-item">
            <image
              src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzM0NzYzNjA3LjYxMTMwMTI%3D%27/0.png"
            ></image>
          </view>
          <view class="img-item">
            <image
              src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzM0NzYzNjA3LjYxMTMwMTI%3D%27/0.png"
            ></image>
          </view>
        </view>
        <view class="shop-panel">
          <view class="shop-left">
            <view class="img-box">
              <image
                src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzM0NzYzNjA3LjYxMTMwMTI%3D%27/0.png"
              ></image>
            </view>
          </view>
          <view class="shop-right">
            <view class="shop-title">蛋黄酥蛋黄酥蛋黄酥蛋黄酥蛋黄酥蛋黄酥</view>
            <view class="coupon-bg">
              <view class="coupon-item first-item">
                <view class="coupon-1">¥58.00</view>
                <view class="coupon-txt">券后价</view>
              </view>
              <view class="coupon-item second-item">
                <view class="coupon-1">¥58.00</view>
                <view class="coupon-txt">券额</view>
              </view>
              <view class="coupon-item three-item">
                <view class="txt1">去购买</view>
                <view class="txt1">省赚¥58.00</view>
                <view class="triangle-right"></view>
              </view>
            </view>
          </view>
        </view>
        <view class="comment-panel">
          <view class="comment-content">
            <view class="comment-top">
              <view class="comment-title"
                ><u-icon name="chat" size="30"></u-icon
                ><view>评论文案:</view></view
              >
              <view class="copy-btn">复制评论</view>
            </view>
            <view class="comment-txt"
              >最新活动最新活动最新活动最新活动最新活动最新活动</view
            >
          </view>
          <view class="bottom-list">
            <view class="bottom-item bottom-line">
              <view class="inner">
                <u-icon name="photo" size="24"></u-icon>
                复制文案
              </view>
            </view>
            <view class="bottom-item bottom-line">
              <view class="inner">
                <u-icon name="photo" size="24"></u-icon>
                分享好物
              </view>
            </view>
            <view class="bottom-item">
              <u-icon name="photo" size="24"></u-icon>
              下载素材
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "live",
  data() {
    return {
      keyword: "",
      activeIndex: 0,
    };
  },
  methods: {
    handelClickBtn(val) {
      this.activeIndex = val;
    },
  },
};
</script>

<style scope lang="scss">
.moments-top-bg {
  background-size: 750rpx 300rpx;
  width: 750rpx;
  height: 300rpx;
}
.search-box {
  padding: 20rpx;
}

.tab-list {
  background-size: 100% 104rpx;
  height: 104rpx;
  display: flex;
  justify-content: start;
  position: relative;
  z-index: 9999999;
}

.tab-item {
  width: 180rpx;
  text-align: center;
  height: 60rpx;
}

.item-content {
  display: flex;
  flex: 1;
}

.show-list {
  position: absolute;
  left: 0;
  top: 70%;
  background: #fff;
  width: 750rpx;
  min-height: 496rpx
}
.show-bottom-btn {
  position: absolute;
  left: 0;
  bottom: 5%;
  margin: 0 20rpx;
  display: flex;
  justify-content: space-around;
}
.show-bottom-btn .btn {
width: 340rpx;
height: 80rpx;
line-height: 80rpx;
background: #FFFFFF;
border-radius: 40rpx;
border: 1px solid #999999;
box-sizing: border-box;
text-align: center;
}
.show-bottom-btn .reset-btn {
  margin-right: 20rpx;
}
.moments-list {
  margin: 0 20rpx;
}
.show-bottom-btn .sure-btn {
  border: 1px solid #d40000;
  background: #d40000;
  color: #fff;
}
.moments-item {
  border-radius: 20rpx;
  min-height: 50vh;
  border: 2rpx solid #f9a9ba;
  background: #fff;
  margin-bottom: 20rpx;
}

.top-panel {
  display: flex;
  padding: 30rpx 20rpx;
}

.logo-box {
  width: 80rpx;
  height: 80rpx;
  border-radius: 100%;
}

.logo-box image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 100%;
}

.company-title {
  font-size: 30rpx;
  color: #333333;
  font-weight: 600;
}

.time {
  font-size: 30rpx;
  color: #999999;
}

.txt-panel {
  padding: 0rpx 20rpx 20rpx;
  font-size: 32rpx;
  line-height: 48rpx;
}

.img-list {
  display: flex;
  margin: 0 10rpx;
}

.img-item {
  flex: 1;
  width: 210rpx;
  height: 210rpx;
  margin: 0 10rpx;
}
.img-item image {
  width: 210rpx;
  height: 210rpx;
  border-radius: 20rpx;
}

.shop-panel {
  margin: 20rpx;
  background: #ffeded;
  height: 200rpx;
  border-radius: 20rpx;
  display: flex;
  justify-content: start;
}

.shop-left {
  // width: 176rpx;
  padding: 20rpx;
  height: 190rpx;
}

.img-box {
  // margin: 20rpx;
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
  border: 2rpx solid #ffcccc;
}

.img-box image {
  width: 100%;
  height: 148rpx;
  border-radius: 20rpx;
}

.shop-title {
  width: 430rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 12rpx;
}

.coupon-bg {
  width: 470rpx;
  height: 104rpx;
  background: #fff;
  border: 2rpx solid #ffcccc;
  border-radius: 10rpx;
  display: flex;
}
.coupon-item {
  flex: 1;
}

.first-item {
  height: 70rpx;
  border-right: 2rpx solid #ffcccc;
  margin: auto;
  text-align: center;
  font-size: 28rpx;
}

.coupon-1 {
  color: #d40000;
  font-weight: 600;
}

.coupon-txt {
  color: #333;
}

.second-item {
  text-align: center;
  margin: auto;
  font-size: 28rpx;
}

.three-item {
  background: #d40000;
  border-radius: 10rpx;
}

.txt1 {
  font-size: 28rpx;
  color: #fff;
  margin-top: 8rpx;
  margin-left: 8rpx;
  font-weight: 600;
}

.triangle-container {
  position: relative;
  width: 0; /* 不需要宽度 */
  height: 0; /* 不需要高度 */
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #fff;
  border-bottom: 5px solid transparent;
  position: relative;
  left: 0;
  top: -47%;
}

.comment-panel {
  margin: 20rpx;
}

.comment-content {
  height: 180rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  padding: 20rpx;
}

.comment-title {
  display: flex;
  justify-content: start;
  vertical-align: middle;
}

.comment-title view {
  font-weight: 600;
}

.comment-top {
  display: flex;
  justify-content: space-between;
}

.bottom-list {
  display: flex;
  justify-content: space-around;
  height: 106rpx;
  align-items: center;
}

.bottom-item {
  height: 30rpx;
  display: flex;
  justify-content: start;
  align-items: center;
}

.bottom-line {
  border-right: 2rpx solid #cccccc;
}

.inner {
  margin-right: 30rpx;
  display: flex;
}

.red-line {
  width: 30rpx;
  height: 12rpx;
}

.second-list {
  display: flex;
  justify-content: start;
  background: url("/static/image/pink_bg.png");
  background-size: 750rpx 104rpx;
  width: 750rpx;
  height: 104rpx;
}

.acitve {
  font-weight: 800;
}
.show-item {
  width: 220rpx;
  height: 64rpx;
  text-align: center;
  font-size: 26rpx;
  color: #666666;
  background: #f6f6f6;
  border-radius: 32rpx;
  line-height: 64rpx;
  display: inline-block;
  margin: 10rpx;
}
</style>